/**
 * TabPanel
 */
function isRender(p) {
	console.log(p.title + "被渲染了");
}
Ext.onReady(function() {
	var i = 0;
	var tabPanel = new Ext.TabPanel({
		// TabPanel里面的选项板是一个Panel
		// 一开始显示的Tab 0开始
		activeTab : 0,
		// 延迟渲染,一次性渲染所有面板
		deferredRender : false,
		// tab位置默认为top,另外的值是bottom
		tabPosition : "top",
		enableTabScroll : true,
		bbar : [ {
			text : "添加选项",
			handler : function() {
				var id = "tab" + i;
				tabPanel.add({
					// 不建议用id
					id : id,
					title : "子面板" + i++
				});
				// 设置新增的Tab为活跃的Tab
				tabPanel.setActiveTab(id);
			}
		}, {
			text : "删除选项",
			handler:function(){
				// 获取当前活跃的Tab
				var tab = tabPanel.getActiveTab();
				tabPanel.remove(tab);
			}
		} ],
		items : [ {
			xtype : "panel",
			title : "面板1",
			html : "hello",
			listeners : {
				render : isRender
			}
		}, {
			title : "面板2",
			html : "world",
			listeners : {
				render : isRender
			}
		}, {
			title : "面板3",
			autoLoad : "news.html",
			// 可关闭的
			closable : true,
			listeners : {
				render : isRender
			}
		} ]
	});
	new Ext.Viewport({
		layout : "fit",
		items : tabPanel
	});
});